<style scoped>
.el-textarea.el-input--small textarea {
  broder: none !important;
}

.page {
  background: rgba(249, 249, 249, 1);
}
</style>
<style>
.header-container {
  background: #fff;
}

.el-scrollbar__wrap {
  overflow-x: hidden;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both; /*清除浮动*/
  visibility: hidden;
}

.clearfix {
  zoom: 1; /*为IE6，7的兼容性设置*/
}
.flex {display: flex;}
</style>
<style>
.margin-bottom-20 { margin-bottom: 20px;}
.padding-10 {padding: 10px;}
.padding-top-bottom-20 {padding-top: 20px;padding-bottom: 20px;}
.padding-left-right-10 {padding-left: 10px;padding-right: 10px;}
.flex-c-c {-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.pointer {cursor: pointer;}
.sub-small {font-size: 14px;line-height: 18px;}
.text-one-row-overflow {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;}
.color-grey, .grey {color: #999;}
.small {font-size: 12px;}
.padding-top-5 {padding-top: 5px;}
.margin-left-10 {margin-left: 10px;}
.padding-20 {padding: 20px;}
.padding-left-10 {padding-left: 10px;}
.margin-top-bottom-10 {margin-top: 10px;margin-bottom: 10px;}
.border-bottom {border-bottom: 1px solid #ddd;}
</style>

<template>
  <div class="page">
    <div v-loading="loadingJDK" class="wrapper" style="display:flex;justify-content: center;align-items: center;">
      <!-- v-if="conversationListReal&&conversationListReal.length>0" -->
      <div
        v-if="conversationListReal&&conversationListReal.length>0"
        class="flex  innerBox "
        style="height: 700px;width: 900px; margin:auto auto;background: #fff;box-shadow: 4px 4px 4px #ccc; margin-top: 50px;"
      >
        <div style="width: 260px;" class="bg-white ">
          <leftMenu />
          <!-- <div class="padding-top-10">
               <el-button type="text" @click="">消息记录</el-button>
           </div>-->
        </div>
        <div class="flex-1  bg-white margin-left-10" style="max-width: 831px; flex: auto;">
          <rightMesage v-if="isSelectSystemMessage" class="vue" />
          <!-- <systemMessageList v-else class="vue" /> -->
        </div>

      </div>
      <div v-else class="padding-20 text-center">
        还没有人找您聊天
      </div>
    </div>
  </div>
</template>
<script>
import { createProp } from '@/tim';
import messageStoreMixin from '@/store/message/messageStoreMixin';
import myalert from '@/tim/myalert';
import genUserSig from '@/tim/GenerateTestUserSig';
// import { goBack } from '@/tim/routerUtil';
import { getNickName } from '@/tim';
import { getLoginUser } from '@/tim';
import { gobackYiWu } from '@/tim';
import ajax from '@/tim/ajax';
import { type_reservation_status_waiting, type_src_supplier } from '@/tim/constact';
import { getProjectId } from '@/tim';
import { sendMessage4First } from '@/tim/imUtils';
import { getMessageStateCurrentConversation } from '@/store/message/MessageStoreUtil';
import { getUrlParamNative } from '@/tim';
// import Bus from '@tim/bus.js';

export default {
  name: 'messagePage',
  mixins: [messageStoreMixin],
  data () {
    return {
      listReceived: [],
      toId: '',
      conversationID: '',
    }
  },
  props: {
    value: createProp(String)
  },
  computed: {
    loadingJDK () {
      return !this.$store.state.message.isSdkReady
    },

    conversationListReal () {
      return this.conversationList.filter(item =>
        item.conversationID.indexOf(`GROUPgroup_zhibo`) < 0 &&
        item.conversationID.indexOf(`@TIM#SYSTEM`) < 0 &&
        item.conversationID.indexOf(`GROUPsystem_8f5ee644`) < 0
      )
    },
    isSelectSystemMessage () {
      // 如果没有人选择 会话就默认选中 消息
      return getMessageStateCurrentConversation() && getMessageStateCurrentConversation().conversationID
    },
  },
  created () {
    const self = this;
  /*  Bus.$on("eventBeforeLoginIM", () => {
      console.log(" Bus eventBeforeLoginIM ")
      self.setConversationFlow()
    })*/
  },
  async mounted () {
    // var user = getLoginUser()
    this.toId = getUrlParamNative('to')
    this.scrollToBottom()
    setTimeout(async () => {
      window._vm.$store.commit('message/set_isSdkReady', true);
    }, 3000)

    this.setConversationFlow()
  },
  components: {
    leftMenu: () => import('./components/leftMenu'),
    rightMesage: () => import('./components/rightMesage.vue'),
    // systemMessageList: () => import('./components/systemMessageList')
  },
  methods: {
    setConversationFlow () {
      setTimeout(async () => {
        var conversation = null;
        console.log('this.toId', this.toId)
        if (!this.toId) {
          var conversationList = this.conversationList.filter(item => item.type != 'GROUP' && item.type != '@TIM#SYSTEM' &&
            item.conversationID.indexOf(`GROUPgroup_zhibo`) > 0 &&
            item.conversationID.indexOf(`@TIM#SYSTEM`) > 0 &&
            item.conversationID.indexOf(`GROUPsystem_8f5ee644`) > 0)

          conversation = conversationList[0]
          console.log('消息列表', conversationList)
        } else {
          // 根据路径新建 conversation or update currentConversation
          conversation = this.filterConversationById(this.toId)
          console.log('当前会话conversation', conversation)
          // 没有会话 create会话 也就是发送一个消息给对方
          if (!conversation) {
            await sendMessage4First(this.toId)
          }
        }
        if (conversation) {
          // 设置 currentConversation //loadMessageList
          await window.tim.setMessageRead({ conversationID: conversation.conversationID })
          window._vm.$store.commit('message/set_currentMessageList', [])
          this.set_currentConversation(conversation)

          await this.getMessageList(conversation) // 最后一条信息要添加到位
        } else {
          // var conversation = { conversationID: `C2C${this.toId}` }
          // //没有的话新增这个会话框
          // var message = window.tim.createTextMessage({
          //   to: this.toId,
          //   conversationType: window.TIM.TYPES.CONV_C2C,
          //   payload: {
          //     text: `${this.isEn ? 'hello' : '你好'}`
          //   }
          // })
          // await window.tim.sendMessage(message).catch(error => {
          //   console.error("sendMessage ", error)
          // })
          // //重新 选项会话 刷一次数据
          // await window.tim.setMessageRead({ conversationID: conversation.conversationID })
          // window._vm.$store.commit('message/set_currentMessageList', [])
          // this.set_currentConversation(conversation)
          // await this.getMessageList(conversation) //最后一条信息要添加到位

        }
      }, 1000)
    },
    filterConversationById (id) {
      var one = this.conversationList.filter(item => item.conversationID == `C2C${id}`)
      return one && one[0]
    },
    scrollToBottom () {
      var self = this
      //    发送之后滚到最后
      self.$nextTick(() => {
        var dom = $('.myScrollbar').find('.el-scrollbar__wrap')[0]
        // console.log("dom.scrollHeight========>", dom.scrollHeight)
        dom && dom.scrollHeight &&
          $(dom).animate &&
          $(dom).animate({
            scrollTop: (dom.scrollHeight + 200)
          }, 500)
      })
    },
    goback () {
      goBack()
    },
    goquite () {
      setTimeout(() => {
        window.close();
      }, 1500)
    },

  },

}
</script>
